<template>
  <el-container>
    <el-header></el-header>
    <el-main>
      <el-row class="flex-center">
        <LoginForm 
          title="MODIFY"
          :formProps="formProps" 
          @confirm="confirm"
          confirmLabel="M O D I F Y"
        ></LoginForm>
      </el-row>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import LoginForm from '@/components/Form'

export default {
  name: 'ModifyPage',
  components: {
    LoginForm
  },
  data() {
    return {
      formProps: [
        {prop: 'username', label: '账户', required: true, type: 'input'},
        {prop: 'oldPassword', label: '旧密码', required: true, type: 'password'},
        {prop: 'newPassword', label: '新密码', required: true, type: 'password'},
        {prop: 'password', label: '确认密码', required: true, type: 'password'}
      ]
    }
  },
  methods: {
    confirm(data) {
      if(data.password === data.newPassword) {
        this.$api.api_user.modify(data).then(res => {
          console.log(res);
        })
      } else {
        this.$message.error('两次密码不一致')
      }
    }
  }
}
</script>

<style scoped>
.flex-center {
  display: flex;
  justify-content: center;
}
</style>
